import { useState } from 'react';
import { getGirlVideo } from "../utils/girlVideo.js"; 
import { getGraphql, healthPost, getBook } from "../utils/graphql.js";
import { Button } from 'antd';

const PictureInPictureVideoButton = () => {
  const [pipWindow, setPipWindow] = useState(null);

  console.log(pipWindow);

  getGraphql();
  healthPost();
  getBook();


  const handlePipClick = async () => {
    try {
      // 请求画中画窗口
      const newPipWindow = await window.documentPictureInPicture.requestWindow({
        width: 480,
        height: 270
      });
      setPipWindow(newPipWindow);

      // 创建视频元素并设置源
      const video = document.createElement('video');
      const url = getGirlVideo();
      console.log("url:::", url);
      // 复制没反应？？
      video.src = "https://alimov2.a.kwimgs.com/upic/2023/07/25/16/BMjAyMzA3MjUxNjUwMDBfMzU0MjY2NDUwM18xMDg4NDcwMTg0MjZfMl8z_b_B5b23c1f2d309e2a989feeeff1325da4b.mp4?clientCacheKey=3x5tm3sr6v9tsk2_b.mp4&tt=b&di=b72e16c7&bp=13414";
      video.controls = true;
      video.autoplay = true;
      video.width = 480;
      video.height = 270;

      // 将视频添加到画中画窗口
      newPipWindow.document.body.appendChild(video);

      return newPipWindow;
    } catch (error) {
      console.error('打开画中画视频失败:', error);
      return null;
    }
  };

  return (
    <Button
      type="primary"
      id="pipBtn" 
      onClick={handlePipClick}
      style={{
        backgroundColor: '#FB7299',
        color: 'white',
        padding: '14px 28px',
        border: 'none',
        borderRadius: '6px',
        cursor: 'pointer',
        fontSize: '16px',
        fontWeight: 'bold',
        transition: 'all 0.3s ease',
        boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
      }}
      onMouseOver={(e) => {
        e.target.style.backgroundColor = '#F53163';
        e.target.style.transform = 'translateY(-2px)';
        e.target.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
      }}
      onMouseOut={(e) => {
        e.target.style.backgroundColor = '#FB7299';
        e.target.style.transform = 'translateY(0)';
        e.target.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
      }}
    >
      打开《风中有朵雨做的云》吉他谱视频
    </Button>
  );
};

export default PictureInPictureVideoButton;